<template>
  <div class="indexModule" id="articleList">
    <van-tabs animated border sticky style="z-index:99" @click-tab="onClickTab">
      <van-tab v-for="(item,index) in tagTypeData" :name="item.id" :title="item.value" :key="index"></van-tab>
    </van-tabs>
    <div class="topicBox">
      <better-scroll ref="bs1" @downCb="downCb" @upCb="upCb" :noMore="noMore">
        <template v-slot:content>
          <div class="topicList" v-if="topicData.length>0">
            <div class="item" v-for="(item, index) in topicData" :key="index">
              <div class="avatarBox">
                <img v-if="item.real === '1'" :src="
                                    item.src ||
                                    require('src/assets/imgs/use.png')
                                " />
                <img v-else :src="require('src/assets/imgs/use.png')" />
              </div>
              <div class="topInfo">
                <div class="top-box">
                  <span class="userName" v-if="item.real === '1'">{{
                                        item.nickName
                                    }}</span>
                  <span class="userName" v-else>匿名用户</span>
                </div>
                <div class="bottom-box"><i class="time">{{ item.createTime }}</i></div>
              </div>
              <div class="clearfix"></div>
              <div class="title" @click="routerPush(item.id, 'articleDetail')">
                {{ item.title }}
              </div>
              <div class="summary" v-if="false" v-html="item.des"></div>
              <div class="detailInfo"><span class="bLeft">
                  <div class="tagName">{{ item.tagName }}</div>
                </span>
                <p class="bRight">
                  <van-icon name="chat-o" />
                  <span style="margin-left: 2px; margin-right: 5px;">{{ item.commentTotal }}</span>
                  <van-icon name="eye-o" />
                  <span style="margin-left: 2px;">{{ item.views }}</span>
                </p>
              </div>
            </div>
          </div>
          <div v-else class="searchEmptyBox main">
            <div style="background: #fff; height: 1px"></div>
            <h1 class="searchInfo" v-html="resultText"></h1>
          </div>
        </template>
      </better-scroll>
    </div>
    <van-popup v-model:show="dialogVisible" closeable lock-scroll :before-close="close">
      <div class="wordsBox">
        <div class='header'>
          <p>用户需知</p>
        </div>
        <div class="words">
          <h2>1 目的</h2>
          <p>为加强企业和员工、员工和员工之间的交流互动，让员工的真实想法得到展现，加速企业与员工信息的传递和共享，及时澄清、化解矛盾，形成企业内部的良性互动。同时建立及时响应的机制，充分重视和尊重有建设性的意见和想法，解决相对应的问题，搭建温馨和谐的交流平台，创造一个良好的讨论环境，结合公司实际情况，特启用本社区。</p>
          <h2>2 社区管理规定</h2>
          <p>2.1 用户的权利、义务和责任</p>
          <p>2.1.1 用户在心声社区有自由发言的权利，但发言必须以事实为依据；</p>
          <p>2.1.2 公司鼓励用户实名发言，用户有匿名发言的权利；</p>
          <p>2.1.3 用户在发言时可自己控制内容是否对外部可见。对于敏感内容，社区管理员有权进行可见范围变更。是否属于敏感内容，由社区管理员判断；</p>
          <p>2.1.4 用户帐号和密码由用户负责保管；用户不应将其帐号、密码出借给他人使用；如用户转借帐号，所有责任和后果由用户承担，同时社区管理员有权收回或封禁该帐号；</p>
          <p>2.1.5 “员工心声”倡导文明、客观、理性的发帖原则，对违规帖，社区管理员有权作出处理（包括但不限于：更改或删除用户张贴的内容等、暂停或终止用户使用社区的权利；违反公司管理规定或者国家法律法规的，社区保留进一步要求用户承担相应责任的权利）。</p>
          <p>2.2 禁止传播的信息或资料：</p>
          <p>2.2.1 任何政治言论；任何有关经济、军事、外交等社会公共事务的报道、评论，以及有关社会突发事件的报道、评论；</p>
          <p>2.2.2 违反国家宪法、法律、法规的；</p>
          <p>2.2.3 煽动民族仇恨、民族歧视，破坏民族团结的；</p>
          <p>2.2.4 破坏国家宗教政策，宣扬邪教和封建迷信；</p>
          <p>2.2.5 散布谣言，扰乱社会秩序，破坏社会稳定的，制造恐慌，影响公司正常经营的；</p>
          <p>2.2.6 散布 淫秽、色情、赌博、暴力、凶杀、血腥、恐怖或教唆犯罪的；</p>
          <p>2.2.7 任何形式的借贷款、集资、广告，一切涉及商业利益或个人谋利的；</p>
          <p>2.2.8 任何虚假、骚扰、中伤、辱骂、恐吓、庸俗淫秽、人身攻击或其他任何非法或不当的；</p>
          <p>2.2.9 侮辱或者诽谤他人，侵害他人合法权益的；</p>
          <p>2.2.10 涉及违反公司保密管理规定及各部门内部机密的信息，如工资、合同具体金额、个人隐私等信息；</p>
          <p>2.2.11 大量、恶意发布重复的问题和相关话题的；</p>
          <p>2.2.12 含有病毒、木马等性质的下载链接或资源；</p>
          <p>2.2.13 任何形式的广告以及含有广告内容及广告链接的帖子。</p>
          <p>2.2.14 其他违反国家法律法规、扰乱社区言论秩序的内容。</p>
          <p>凡涉及上述信息的内容，社区有权直接删除或者屏蔽；凡违反规定发布上述信息者，社区视情节轻重有权对其进行警告、线上约谈、封ID、注销ID等处理，直至交由相关部门追究责任。</p>
          <p>2.3 “员工心声”采用定期的方式回复员工留言，请在留言答复模块中查阅相关答复信息。</p>
          <p>2.4 此版面为公司专有的平台，禁止转载、引用、在公司范围外散布版面内容。</p>
          <p>2.5 隐私权保护</p>
          <p>保护用户隐私是心声社区的一项基本政策，心声社区不向第三方提供单个用户的注册资料，但下列情况除外：</p>
          <p>2.5.1 获得用户的授权；</p>
          <p>2.5.2 根据有关的法律法规要求；</p>
          <p>2.5.3 用户严重违反公司管理规定</p>
          <p>2.6 其他</p>
          <p>2.7.1 心声社区用户观点只代表发布用户本身，不代表公司立场，发帖者责任自负。</p>
          <p>2.7.2 心声社区不对用户发布内容的真实性、合法性、准确性负责，使用者对心声社区发布内容应理性判断，如认为发布内容不当或给其造成损害，可通知管理员，管理员视情况确定是否采取删除、屏蔽、断开链接等措施。</p>
        </div>

        <div class="btnBox">
          <van-button class="btn" round @click="close" type="primary">
            关闭
          </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script lang="ts">
import { getTag, getArticle } from 'src/plugins/http/server/article/index';
import { getSecret } from 'src/plugins/http/server/sys/user';
import env from 'src/config';
import betterScroll from 'src/components/betterScroll/index.vue';
import { ref, reactive, onMounted } from 'vue';
import store from 'src/store';
import { useRoute, useRouter } from 'vue-router';
import { msgFn } from 'src/utils';

export default {
    'components': {
        betterScroll
    },

    setup() {
        const $router = useRouter();
        const $route = useRoute();
        const dialogVisible = ref(localStorage.showWords !== '0' );
        const size = () => {
            const sys = UtilTools.getClient();
            if (sys === 'pc') {
                window.location.href = `${env.hostUrl}#/articleList/${$route.params.code}`;
            }
        };
        size();
        window.onresize = () => {
            size();
        };

        // betterScroll
        const bs1 = ref();
        const noMore = reactive({
            'status': false,
            'text': '-- 暂无更多数据 --'
        });

        const searchValue = ref(null);
        const resultText = ref('');
        const code = ref();
        const tagValue = ref(['']);
        const topicData = ref([]);
        const tagTypeData = ref([] as tagObj[]);
        const activeIndex = ref([]);
        const tagData = ref([] as tagObj[]);
        const tagId = ref('');

        const pager = reactive({
            'pageNo': 1,
            'pageSize': 5,
            'total': 0
        });
        const routerPush = (id: string, routerName: string) => {
            let params = {
                'name': routerName,
                'query':{
                    'self':'0'
                },
                'params': {
                    'topicId': id
                }
            };
            $router.push(params);
        };

        const toTopic = () => {
            let params = {
                'name': 'add',
                'params': {
                    'type': '1',
                    'id': '1'
                }
            };
            $router.push(params);
        };
        const getTopic = (cb?: () => void) => {
            let params: paramsObj = {
                'pageNo': pager.pageNo,
                'pageSize': pager.pageSize,
                'self': false
            };
            if (tagId.value) {
                params.tagId = tagId.value;
            }
            getArticle({
                'data': params
            })
                .then((res: any) => {
                    if (res.data.articleDatas.length > 0) {
                        resultText.value = '';
                        res.data.articleDatas.forEach((item: articleObj) => {
                            item.createTime = UtilTools.formatDateTime({
                                'date': item.createTime
                            });
                            item.tagName = tagTypeData.value.filter(
                                tag => tag.id === item.tagId
                            )[0]?.value;
                        });
                        pager.total = res.data.total;
                        if (pager.pageNo === 1) {
                            topicData.value = res.data.articleDatas;
                        } else {
                            topicData.value = topicData.value.concat(res.data.articleDatas);
                        }
                    } else {
                        resultText.value = '该类型暂无话题<br>快来发帖吧！';
                        topicData.value = [];
                    }
                    if (cb) {
                        cb();
                    }
                })
                .catch(e => {
                    msgFn(e);
                });
        };

        const getSecretData = (cb?: () => void) => {
            getSecret({ 'data': { 'userName': code.value } }).then((res: any) => {
                store.commit('_userInfo', res.data);
                if (cb){
                    cb();
                }
            });
        };
        const getTagData = () => {
            let params = {
                'pageNo': 1,
                'pageSize': 99999
            };
            getTag({
                'data': params
            }).then((res: any) => {
                const adminTags = ['33a18364a759436aaab2dedb6b2a336c','c15add25-f6eb-43a1-ac00-05759e008415'];
                if (!res.data.admin){
                    const tags = UtilTools.deepCopy([],res.data.tagDatas);
                    tagData.value = tags.filter((tag:tagObj)=>!adminTags.includes(tag.id));
                } else {
                    tagData.value = UtilTools.deepCopy([],res.data.tagDatas);
                }

                res.data.tagDatas.unshift({
                    'createTime': '',
                    'id': '',
                    'color': '#333344',
                    'modifyTime': '',
                    'value': '全部'
                });
                tagTypeData.value = res.data.tagDatas;
                store.commit('_setTagData', tagTypeData.value);
                store.commit('_setAdminTagData', tagData.value);
            });
        };
        const onClickTab = (item: any) => {
            tagId.value = item.name;
            pager.pageNo = 1;
            noMore.status = false;
            bs1.value.topClick(1);
            getTopic(() => {
                bs1.value.downRefresh();
            });
        };

        onMounted(() => {
            if ($route.params.code) {
                store.commit('_setCode', $route.params.code);
                code.value = $route.params.code;
            } else if (store.state.code) {
                code.value = store.state.code;
            }
            getSecretData(()=>{
                getTagData();
                getTopic();
            });

        });
        return {
            dialogVisible,
            searchValue,
            resultText,
            code,
            tagValue,
            topicData,
            tagTypeData,
            activeIndex,
            tagData,
            tagId,
            onClickTab,
            getTopic,
            toTopic,
            routerPush,
            getTagData,
            bs1,
            noMore,
            downCb() {
                pager.pageNo = 1;
                getTopic(() => {
                    noMore.status = false;
                    bs1.value.downRefresh();
                });
            },
            upCb() {
                if (!noMore.status) {
                    if (topicData.value.length >= pager.total) {
                        noMore.status = true;
                    } else {
                        pager.pageNo += 1;
                        getTopic(() => {
                            bs1.value.upRefresh();
                        });
                    }
                }
                bs1.value.upRefresh();
            },
            close() {
                dialogVisible.value = false;
                localStorage.showWords = '0';
            }
        };
    }
};
</script>

<style  scoped lang="less">
@import '~@/views/article/list/index.css';
.wordsBox {
  padding: 50px 15px 10px 15px;
  .header {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    font-weight: bold;
  }
  .words {
    height: 80vh;
    overflow-y: auto;
    line-height: 24px;
    width: 80vw;
    color: #333;
    h2 {
      font-size: 16px;
      font-weight: 600;
      margin: 5px 0;
    }
    p {
      text-indent: 2em;
    }
  }
  .btnBox {
    text-align: center;
    margin: 10px 0 0px 0;
  }
  .btn {
    width: 200px;
    background: #f56c6c;
  }
}
</style>